<template>
  <div class="container">
    <div class="box">
      <el-table
        :data="textList"
        stripe
        :header-cell-style="headClass"
        :cell-style="tableClass"
        style="width: 100%"
      >
        <el-table-column prop="id" label="文章ID" width="80" fixed="left"></el-table-column>
        <el-table-column prop="name" label="所属类目" min-width="120"></el-table-column>
        <el-table-column prop="title" label="文章名" min-width="150"></el-table-column>
        <el-table-column prop="author" label="作者" min-width="120"></el-table-column>
        <el-table-column :formatter="dateFormat" prop="time" label="日期" min-width="120"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              class="clickBtn"
              type="text"
              size="small"
              @click="handleEditYes(scope.$index,scope.row)"
            >编辑</el-button>
            <el-button
              class="clickBtn"
              type="text"
              size="small"
              @click="handleEditNo(scope.$index,scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页组件-->
    <el-row class="page">
      <el-col :xs="{span:24,offset:0}" :sm="{span:18,offset:6}">
        <el-pagination
          small
          background
          layout="prev ,pager,next"
          :total="pagesizeCount"
          :pager-count="5"
          :page-size="pagesize"
          :current-page.sync="currpage"
          @current-change="getTextList"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textList: [],
      currpage: 1, //当前页码
      pagesize: 10, //每页展示数目
      pagesizeCount: 10 //总条数
    };
  },
  mounted() {
    this.getTextList();
  },
  methods: {
    //获取文章列表
    getTextList() {
      this.$axios
        .get("/api/article/queryArticleListByPage/" + this.currpage + "/10")
        .then(res => {
          this.textList = res.data.articleList;
          this.pagesizeCount = res.data.pageSize;
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    },
    //操作事件
    handleEditYes(index, row) {
      this.$router.push({ name: "edit", params: { id: row.id || "" } });
    },
    handleEditNo(index, row) {
      this.$confirm("确定要 删除 吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$axios
          .get("/api/manage/article/deleteById/" + row.id)
          .then(res => {
            if (res.data.status == 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.textList.splice(index, 1);
            }
          })
          .catch(err => {
            this.$alert("删除失败,请稍后重试!", {
              confirmButtonText: "确定",
              center: true
            });
          });
      });
    },
    //列表日期格式
    dateFormat(row, column, cellValue) {
      var date = new Date(cellValue); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      return Y + M + D;
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 单元格样式
    tableClass() {
      return "text-align: center;";
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .box {
    min-height: 400px;
    margin-bottom: 10px;
  }
}
</style>